<template>
	<view>
		<!-- gpt -->
		<view style="position: relative;">
			<view class="process flex  align-center justify-center" @click="toMission">
				<x-lottie style="width:70rpx;height:70rpx" :option="{
				                path:require('../../../static/json/a.json')
				}" />
				<view style="margin-left: 10rpx;">
					<view style="color:#333333 ; font-size: 28rpx;">共厂家居</view>9i
					<view style="margin-top: '5rpx';font-size:20rpx;">智能小助手</view>
				</view>
			</view>
		</view>
		<!-- 工厂 -->
		<view class="works">
			<image src="../../../static/tabbar/works.png" mode="aspectFit"
				style="width: 100vw;height: 522rpx;z-index: -1;"></image>
			<view style="background-color: #FFFFFF;border-radius: 40rpx 40rpx 0 0;margin-top: -30rpx;">
				<view class="announce">
					<view class="flex align-center">
						<image src="../../../static/tabbar/gonggao.png" style="width: 48rpx;height: 48rpx;" mode="">
						</image>
						<view style="font-size: 40rpx;font-weight: 500;color: #1E1E1E;margin-left: 10rpx;">
							公告
						</view>
					</view>
					<swiper style="height:86rpx;padding:0 30rpx;line-height:86rpx;" circular="true" vertical="true"
						autoplay="true" interval="3000" duration="1000">
						<swiper-item v-for="(item,index) in noticeList" :key="index">
							{{item.title}}
						</swiper-item>
					</swiper>
				</view>
				<view style="font-size: 40rpx;font-weight: 500;padding: 30rpx;">
					最新图纸
				</view>
				<view class="flex justify-between reservationOne" v-for="(item,index) in  serviceData" :key="index">
					<view class="flex align-center">
						<image :src="item.designerImage" style="width: 100rpx;height: 100rpx;border-radius: 8rpx;"
							mode="">
						</image>
						<view style="line-height: 70rpx;margin-left: 30rpx;">
							<view style="font-size: 32rpx;">
								{{item.projectName}}
							</view>
							<view style="font-size: 28rpx;color: rgba(30,30,30,0.3);">
								{{item.projectArea}}
							</view>
						</view>
					</view>
					<view class="details" style="text-align: center;" @click="details">
						<image src="../../../static/tabbar/search1.png"
							style="width: 48rpx;height: 48rpx;vertical-align: middle;" mode="">
						</image>
						<view style="font-size: 30rpx;font-weight: 400;margin-top: 10rpx;">查看图纸</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: '',
				// 工厂首页
				noticeList: [ //公告栏播报
					{
						message: '高级私人订制手工打造全实木橱柜',
					},
					{
						message: '哈哈哈哈哈哈哈',
					},
					{
						message: '黑恶嘿嘿额',
					},
				],
				// 预约
				serviceData: [],
			}
		},
		onReady() {

		},
		// 触底触发
		onReachBottom() {

		},
		// 下拉刷新
		onPullDownRefresh() {
			setTimeout(() => {
				this.getFactory()
				this.getAnnounce()
			}, 100);
		},
		onLoad(e) {
			this.type = this.$cache.get('type')
			this.getFactory(1, 10)
			this.getAnnounce(1, 10)
		},
		methods: {
			// 公告
			getAnnounce(num, size) {
				let data = {
					pageNo: num,
					pageSize: size,
				}
				this.$api.Announce(data).then((res) => {
					this.noticeList = res.data.result.list
					console.log('公告', res)
				})
			},
			details() {
				this.$tools.goPageNoAuth('/clientEnd/page/ordersList/orderDetail')
			},
			getFactory(num, size) {
				let data = {
					pageNo: num,
					pageSize: size,
				}
				this.$api.factoryQuotation(data).then((res) => {
					this.serviceData = res.data.result.list
					console.log('醋酯纤维', res)
				})
			},
			toMission() {
				this.$tools.goPageNoAuth('/pages/information/gpt')
			},
		}
	}
</script>

<style scoped>
	/* 工厂首页 */
	.announce {
		padding: 30rpx;
		border-bottom: 1rpx solid rgba(30, 30, 30, 0.1);
	}

	.drawing {
		width: 232rpx;
		height: 88rpx;
		color: #fFFFFF;
		background: #492D22;
		border-radius: 8rpx;
		font-size: 30rpx;
		font-family: Noto Sans SC-Regular, Noto Sans SC;
		font-weight: 400;
		color: #FFFFFF;
		padding: 24rpx;
		margin-top: 120rpx;
	}

	.details {
		margin-top: 20rpx;
		height: 132rpx;
		color: #492D22;
		margin: auto 0;

	}

	.reservationOne {
		background-color: #fff;
		padding: 0 30rpx 30rpx 30rpx;
		height: 262rpx;
	}

	/* GPT */
	.process {
		position: fixed;
		width: 258rpx;
		height: 106rpx;
		background: #c3bfbf;
		border-radius: 63px;
		background: #FFFFFF;
		box-shadow: 0px 2px 10px 0px rgba(214, 214, 214, 0.5);
		z-index: 1000;
		right: 20rpx;
		/*  #ifdef APP-PLUS */
		bottom: 80rpx;
		/*  #endif */
		/*  #ifdef H5 */
		bottom: 180rpx;
		/*  #endif */
	}
</style>
